<template>
	<view class="custom-tabbar">
		<view v-for="(item, index) in currentTabBarList" :key="index" :class="item.isAI ? 'tabbar-mid-btn' : 'tabbar-item'"
			@click="goPages(item.url)">
			<template v-if="item.isAI">
				<view class="mid-btn-bg">
					<image class="mid-btn-icon" :src="item.icon" />
				</view>
			</template>
			<template v-else>
				<image class="tabbar-icon" :src="item.icon" />
				<text class="tabbar-text">{{ item.text }}</text>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CustomTabbar",
		data() {
			return {
				parentTabBarList: [{
						text: "首页",
						icon: "/static/home.png",
						url: "/pages/index/index"
					},
					{
						text: "美术馆",
						icon: "/static/gallery.png",
						url: "/pages/art-gallery/art-gallery"
					},
					{
						isAI: true,
						icon: "/static/ai.png",
						url: "/pages/ai-show/ai-show"
					},
					{
						text: "商城",
						icon: "/static/shop.png",
						url: "/pages/shop-order/shop-order"
					},
					{
						text: "我的",
						icon: "/static/my.png",
						url: "/pages/personalCenterParent/personalCenterParent"
					}
				],
				teacherTabBarList: [{
						text: "首页",
						icon: "/static/home.png",
						url: "/pages/homepage/homepage"
					},
					{
						text: "美术馆",
						icon: "/static/gallery.png",
						url: "/pages/art-gallery/art-gallery"
					},
					{
						isAI: true,
						icon: "/static/class.png",
						text: "班级",
						url: "/pages/my-class/my-class"
					},
					{
						text: "商城",
						icon: "/static/shop.png",
						url: "/pages/shop-order/shop-order"
					},
					{
						text: "我的",
						icon: "/static/my.png",
						url: "/pages/personalCenterTeacher/personalCenterTeacher"
					}
				],
				headmasterTabBarList: [{
						text: "首页",
						icon: "/static/home.png",
						url: "/pages/homepage/homepage"
					},
					{
						text: "美术馆",
						icon: "/static/gallery.png",
						url: "/pages/art-gallery/art-gallery"
					},
					{
						isAI: true,
						icon: "/static/class.png",
						text: "班级",
						url: "/pages/my-class/my-class"
					},
					{
						text: "商城",
						icon: "/static/shop.png",
						url: "/pages/shop-order/shop-order"
					},
					{
						text: "我的",
						icon: "/static/my.png",
						url: "/pages/schoolMasterPersonalCenter/schoolMasterPersonalCenter"
					}
				]
			}
		},
		computed: {
			currentTabBarList() {
				// 检查用户角色
				const role = uni.getStorageSync('role');
				const parentId = uni.getStorageSync('parentId');

				if (role === 'headmaster') {
					return this.headmasterTabBarList;
				} else if (role === 'teacher') {
					return this.teacherTabBarList;
				} else if (parentId) {
					return this.parentTabBarList;
				} else {
					// 默认返回家长版本
					return this.parentTabBarList;
				}
			}
		},
		methods: {
			goPages(url) {
				uni.switchTab({
					url
				});
			}
		}
	}
</script>

<style lang="scss">
	.custom-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 60px;
		background: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-end;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		z-index: 999;
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1px solid #e0e0e0;
	}

	.tabbar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		height: 100%;
	}

	.tabbar-icon {
		width: 28px;
		height: 28px;
		margin-bottom: 2px;
	}

	.tabbar-text {
		font-size: 12px;
		color: #333;
	}

	.tabbar-mid-btn {
		width: 70px;
		height: 70px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	.mid-btn-bg {
		width: 60px;
		height: 60px;
		background: #ffffff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.mid-btn-icon {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.mid-btn-text {
		display: none;
	}
</style>